/**
 * min document.getElementById
 * method $
 */
function $(el) {
	return document.getElementById(el);
}

/**
 * delete the extra space
 * method trim
 */
String.prototype.trim = function() {
	return this.replace(/(^\s*)|(\s*$)/g, "");
}

/**
 * add or remove className,if array, the same type,the same class
 * method doClass
 * param {Object | Array} element or element array
 * param {String} class name
 * param {String} add || remove 
 */
function doClass() {
	var arg = arguments;
	if(arg[0].length) {
		arg[0].forEach(function(el) {
			arg.callee(el,arg[1],arg[2]);				
		});
		return;
	}
	var names = arg[0].className.trim().split(' ');
	if(arg[2] == 'add')	{
		if(names.indexOf(arg[1]) > -1) return;
		arg[0].className += ' ' + arg[1];
	} else {
		if(names.indexOf(arg[1]) < 0) return;
		arg[0].className = arg[0].className.split(arg[1]).join(' ').trim();
	}
}

/**
 * add inline css for element
 * method addCSS
 * param {String} some style
 * param {Object} element
 */
function addCSS() {
	var arg = arguments;
	if(arg[1].length) {
		arg[1].forEach(function(el) {
			arg.callee(arg[0],el);				
		});
		return;
	}
	if(arg[1].getAttribute('style') == null) {
		arg[1].setAttribute('style',arg[0]+';');
	} else {
		var arr1 = arg[1].getAttribute('style').split(';'); 
		var arr2 = arg[0].split(';');
		var tmpobj = {};
		var tmpstr = '';
		arr1.concat(arr2).forEach(function(pp) {
			var pv = pp.split(':');
			tmpobj[pv[0]] = pv[1];
		});
		for(var i in tmpobj) {
			i != 'undefined' && i != '' && tmpobj[i] != 'undefined' && (tmpstr += i + ':' + tmpobj[i] + ';');
		}
		arg[1].setAttribute('style',tmpstr);
	}
}

/**
 * main func,load all event
 * method window.onload
 */
window.addEventListener("load", function(){
	var w = screen.availWidth + 60,
	h = screen.availHeight + 60,
	_style = widget.preferenceForKey('style'),
	//ruler and inner
	ruler = $('ruler'),
	operate = $('J_Operate'),
	pre = $('J_Pre'),
	middle = $('J_Middle'),
	next = $('J_Next'),
	//guide and inner
	guide = $('J_Guide'),
	gnum = $('J_GNum'),
	//color and inner
	color = $('J_Color'),
	bgcolor = $('J_BgColor'),
	calpha = $('J_Alpha'),
	cbtn = $('J_ChangeSure'),
	cancel = $('J_CancelSet'),
	//min block
	mblock = $('J_MinBlock'),
	//prepare for innerhtml
	inner = '',
	line = '',
	//log isVertical
	isVertical = false;

	//inti style
	if(_style) {
		var _s = _style.split('|');
		addCSS('background-color:'+_s[0],[ruler,gnum]);
		addCSS('opacity:'+_s[1],ruler);
	}
	window.resizeTo(w,100);
	window.moveTo(0,100);

	//fill the line
	for(var i=0; i<w-60; i++) {
		inner += '<span' + (i%2 == 0 ? (' class="' + (i%10 == 0 ? 'l' : (i%4 == 0 ? 'm' : 's')) + '"') : '') + '></span>';	
	}
	pre.innerHTML = inner,next.innerHTML = inner;

	//fill the num
	for(var j=0; j<(w-60)/100; j++) {
		line += '<b>' + j*100 + '</b>';	
	}
	middle.innerHTML = line;

	/**
	 * add move event for document
	 */
	document.addEventListener('mousemove',function(e) {
		if(ruler.className.indexOf('ver') <0) {
			var l = e.clientX;
			if(l < 60) {
				addCSS('display:none',guide);
			} else {
				guide.firstChild.innerHTML = parseInt(l) - 60;
				addCSS('left:'+parseInt(l)+'px;top:0;display:block',guide);
				addCSS('margin-left:-'+guide.firstChild.offsetWidth/2 + 'px',guide.firstChild);
			}
		} else {
			var t = e.clientY;
			if(t < 60) {
				addCSS('display:none',guide);
			} else {
				guide.firstChild.innerHTML = parseInt(t) - 60;
				addCSS('left:5px;top:'+parseInt(t)+'px;display:block',guide);
			}			
		}
	},false);

	/**
	 * move by dir key
	 */
	document.addEventListener('keypress',function(e) {
		var kcode = e.keyCode;
		switch(kcode*1) {
			case 37:
				window.moveBy(-1,0);	
				break;
			case 38:
				window.moveBy(0,-1);
				break;
			case 39:
				window.moveBy(1,0);
				break;
			case 40:
				window.moveBy(0,1);
				break;
		}
	},false);

	/**
	 * method changeColor
	 * @param {String}
	 */
	function changeColor(para) {
		addCSS('display:'+para,color);
		if(para == 'none') {
			addCSS('background-color:'+bgcolor.value,[ruler,gnum]);
			var _alpha = calpha.value==0 ? 1 : calpha.value;
			addCSS('opacity:'+_alpha,ruler);
			//write to key
			widget.setPreferenceForKey(bgcolor.value + '|' + _alpha, 'style');
		} else {
			bgcolor.value = window.getComputedStyle(ruler,null).backgroundColor;
			calpha.value = window.getComputedStyle(ruler,null).opacity;
			bgcolor.focus();
			bgcolor.select();
		}
	}

	cbtn.addEventListener('click',function() { 
		changeColor('none');
	},false);

	/**
	 * hide color set
	 */
	cancel.addEventListener('click',function() {
		addCSS('display:none',color);
	},false);

	/**
	 * method changeDir
	 */
	function changeDir(el) {
		if(ruler.className.indexOf('ver') < 0) {
			doClass([ruler,guide,color],'ver','add');
			window.resizeTo(100,h);
			el.title = 'Horizontal';
		} else {
			doClass([ruler,guide,color],'ver','remove');
			window.resizeTo(w,100);
			el.title = 'Vertical';
		}
	}
	/**
	 * add set ruler event
	 */
	operate.addEventListener('click',function(e) {
		var cname = e.target.className;
		switch(cname) {
			case 'o-change':
				changeColor('block');
				break;
			case 'o-dir':
				changeDir(e.target);
				break;	
			case 'o-close':
				window.close();
				break;
			case 'o-min':
				window.resizeTo(48,48);	
				addCSS('display:none',ruler);
				addCSS('display:block',mblock);
				ruler.className.indexOf('ver') != -1 ? (isVertical = true) : (isVertical = false);
				window.moveTo(0,100);
		}
	},false);

	/**
	 * max the ruler
	 */
	mblock.firstChild.addEventListener('click',function() {
		isVertical ? window.resizeTo(100,h) : window.resizeTo(w,100);
		addCSS('display:block',ruler);
		addCSS('display:none',mblock);
	},false);

}, false);
